<script
	lang="ts"
	setup
>
import { getComplaintList } from '@/api'
import FullHeightTable from '@/components/FullHeightTable.vue'
import SearchInput from '@/components/SearchInput.vue'
import SubHeader from '@/components/SubHeader.vue'
import { useRenderAction } from '@/hooks/useRenderActions'
import { complaintColumns } from '@/tableColumns/complaint'
import ComplaintStatusSelector from '@/components/ComplaintStatusSelector.vue'
import ProcessComplaint from '@/views/console/complaint/components/ProcessComplaint.vue'
import { Add12Regular } from '@vicons/fluent'
import type {IProductStatusPut} from '@/typed/request'
import { type DataTableProps, NIcon } from 'naive-ui'
import { useRouter } from 'vue-router'
const router = useRouter()
import { ref } from 'vue'

const table = ref()
const showDetail = ref(false)
const productId = ref<number | null>(null)
const showAddModal = ref<boolean>(false)
const currentItem = ref<any>({})
const filterPrams = ref({
	keyword: '',
	status:0
})
const showResetModal = ref(false)
const currentResetUser = ref<any>(null)

const tableProps = ref<DataTableProps>({
	scrollX: 1200,
	rowKey: (item) => item.id,
    columns: (complaintColumns || []).concat([
        {
            title: '操作',
            key: 'actions',
            width: 240,
            fixed: 'right',
            align: 'center',
            render: item => {
                return useRenderAction([
                    {
                        label: '处理',
                        type: 'primary',
                        round: true,
                        size: 'small',
                        disabled: item.status !== 0,
                        onClick: () => onShow(item)
                    }
                ]);
            }
        }
    ])
})

function onShow(item: any) {
    currentItem.value = item;
    showAddModal.value = true
}

function reloadTable() {
	showAddModal.value = false
	table.value.reload();
}



</script>

<template>

	<n-layout>
		<sub-header>
			<template #right>
				<ComplaintStatusSelector v-model:value="filterPrams.status"/>
				<SearchInput
					v-model:value="filterPrams.keyword"
					placeholder="订单ID/商品名称"
					width="210"
				/>

			</template>
		</sub-header>
		<n-layout class="content">
			<FullHeightTable
				ref="table"
				:params="filterPrams"
				:table-props="tableProps"
				:table-request="getComplaintList"
			/>
		</n-layout>

		<ProcessComplaint
			v-model:show="showAddModal"
			:data="currentItem"
			@update:list="reloadTable"
		/>

	</n-layout>
</template>
<style
	lang="less"
	scoped
>
.content {
	padding: 0 20px 20px 20px;

	header {
		padding: 20px 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}
</style>
